<template>
<div>
  <el-container class="body">
    <el-header>
      <div class="headConfig">
        <div class="headLeft">果茶店管理后台</div>
        <div class="headRight">
          <p>欢迎您:{{getAccount}}</p>
          <el-button type="primary" @click="logout">退出</el-button>
        </div>
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-col :span="24">
          <el-menu
              :default-active="defaultMenu"
              class="el-menu-vertical-demo"
              @select="selected">
            <el-menu-item index="0">
              <i class="el-icon-menu"></i>
              <span slot="title">管理员管理</span>
            </el-menu-item>
            <el-menu-item index="1">
              <i class="el-icon-menu"></i>
              <span slot="title">订单管理</span>
            </el-menu-item>
            <el-menu-item index="2" ><!--disabled 可以禁用该导航-->
              <i class="el-icon-document"></i>
              <span slot="title">商品分类</span>
            </el-menu-item>
            <el-menu-item index="3">
              <i class="el-icon-setting"></i>
              <span slot="title">商品管理</span>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-s-data"></i>
              <span slot="title">销量统计</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-aside>
      <el-container>
        <el-main>
          <router-view/>
        </el-main>
        <el-footer>version1.0</el-footer>
      </el-container>
    </el-container>
  </el-container>
</div>
</template>

<script>
const menuArr=['admin','order','category','goods','top'];
export default {
  data() {
    return {
      defaultMenu:'0'
    }
  },
  mounted() {
    const name=this.$route.name
    for (let i = 0; i <menuArr.length ; i++) {
         if(menuArr[i]==name){
           this.defaultMenu=i+'';
           break;
         }
    }
  },
  // created() {
  //   this.$router.push(menuArr[0])
  // },
  computed:{
     getAccount(){
       const account=localStorage.getItem('account')
      if(!account){
        this.$router.push('login')
        return
      }
      const {username}= JSON.parse(account);
      if(!username){
        this.$router.push('login')
        return
      }
      return username;
     }
  },
  methods:{
    //导航选中
    selected(key,path){
      // console.log(key,path)
      this.$router.push(menuArr[key])
    },
    //退出登录
    logout(){
      localStorage.removeItem('account')
      this.$router.push('login')
    }
  }
}
</script>

<style lang="scss" scoped>
.el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.body {
  height: 100vh;
  .el-header {
    background: linear-gradient(to right, rgb(107, 151, 247), rgb(255, 255, 255));

    .headConfig {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .headLeft {
        color: #fff;
        font-size: 20px;
        font-weight: bold;
      }

      .headRight {
        display: flex;
        align-items: center;

        p {
          margin-right: 20px;
        }

        .el-button {
          height: 40px;
        }
      }
    }
  }
}
.el-aside {
  background-color: #fff;
  color: #333;
  text-align: center;
  border-right: 1px solid #B3C0D1;
  .el-menu{
    border-right: none;
  }
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

</style>